<template>
  <div class="income">
    <div class="w">
      <div class="breadcrumb-box clearfix">
        <Breadcrumb class="fl" :breadcrumbs="breadcrumbs" />
        <!-- <router-link v-if="!obAccessKey && subCoinType === 'btc' && language === 'zh'" class="fr link" to="/dividend">{{$t('income.dividend')}}</router-link> -->
      </div>
      <btc v-if="subCoinType === 'btc'"/>
      <bch v-else-if="subCoinType === 'bch' || subCoinType === 'bsv'"/>
      <dcr v-else-if="subCoinType === 'dcr' || subCoinType === 'zec'"/>
      <innovate v-else/>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import Breadcrumb from '@/components/Breadcrumb';
import btc from './components/btc';
import bch from './components/bch';
import dcr from './components/dcr';
import innovate from './components/innovate';

export default {
  name: 'income',
  components: {
    Breadcrumb,
    btc,
    bch,
    dcr,
    innovate,
  },
  data() {
    return {
      breadcrumbs: [
        {
          path: '/',
          titleKey: 'router.home',
        },
        {
          path: '/pools/income',
          titleKey: 'router.income',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['subCoinType']),
  },
};
</script>
<style lang="scss" scoped>
.income {
  .breadcrumb-box {
    .link {
      margin-top: 20px;
      display: block;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #70c1b3;
      border-radius: 3px;
      font-size: 12px;
      color: #fff;
    }
  }
  /deep/ .panel-top {
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    overflow: hidden;
    margin-bottom: 30px;
    &:nth-of-type(3) {
      .item-content {
        .item {
          &:nth-of-type(2) {
            flex: 2;
          }
        }
      }
    }
    .item-title {
      height: 50px;
      padding: 13px 20px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #f2f2f2;
      font-size: 12px;
      line-height: 24px;
      .name {
        color: #333333;
      }
      .link {
        color: #247ba0;
      }
      .button-box {
        display: flex;
        width: 110px;
        height: 24px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #cccccc;
        overflow: hidden;
        button {
          flex: 1;
          border-right: 1px solid #cccccc;
          background-color: #f4f4f4;
          color: #646464;
          outline: none;
          border: none;
          &:last-of-type {
            border-right: none;
          }
          &.active {
            background-color: #fff;
          }
        }
      }
    }
    .item-content {
      display: flex;
      .item {
        flex: 1;
        height: 120px;
        text-align: center;
        position: relative;
        padding: 21px 0 0;
        line-height: 1.5;
        .item-top {
          color: #333333;
          .val {
            font-size: 24px;
            line-height: 46px;
          }
          .unit {
            font-size: 14px;
          }
        }
        .item-bottom {
          .name {
            color: #cccccc;
            font-size: 16px;
          }
        }
      }
    }
  }
  /deep/ .table-box {
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    position: relative;
    .header {
      height: 50px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #f2f2f2;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      // .area {
      //   height: 30px;
      //   line-height: 28px;
      //   border-width: 1px;
      //   border-style: solid;
      //   font-size: 12px;
      //   margin-top: 10px;
      //   border-radius: 3px;
      //   display: flex;
      //   background-color: #fff;
      //   border-color: #eaeaea;
      //   width: 120px;
      //   // width: 360px;
      //   span {
      //     text-align: center;
      //     flex-grow: 1;
      //     display: inline-block;
      //     border-right: 1px solid #eaeaea;
      //     cursor: pointer;
      //     &.active {
      //       background-color: #247ba0;
      //       color: #fff;
      //     }
      //     &:last-of-type {
      //       border: none;
      //     }
      //   }
      // }
      .excel {
        width: 90px;
        height: 30px;
        line-height: 30px;
        background-color: #ffffff;
        border-radius: 3px;
        border: solid 1px #cccccc;
        font-size: 12px;
        color: #333333;
        cursor: pointer;
        text-align: center;
        // margin-top: 10px;
      }
    }
    table {
      width: 100%;
      tr {
        border-top: 1px solid #eaeaea;
        &:nth-of-type(even) {
          background-color: #fbfbfb;
        }
        th {
          height: 30px;
          color: #ccc;
          font-weight: normal;
          i {
            margin-left: 6px;
            font-weight: bold;
          }
        }
        td {
          height: 60px;
          color: #333;
        }
        th,
        td {
          font-size: 12px;
          white-space: nowrap;
          text-align: center;
          border: none;
          &:first-of-type {
            [type="checkbox"] {
              display: none;
              & + label {
                width: 16px;
                height: 16px;
                background-color: #ffffff;
                border-radius: 3px;
                border: solid 1px #eaeaea;
                display: inline-block;
                vertical-align: middle;
              }
              &:checked + label {
                border: none;
                &::after {
                  content: "\E67D";
                  font-size: 16px;
                  color: #70c1b3;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
